<route lang="json5" type="home">
{
  layout: 'theme', // 使用主题
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="min-h-screen flex flex-col bg-[#F3F5F7] pb-20 box-border overflow-hidden">
    <!-- 顶部导航栏 -->
    <view class="h-346rpx w-full pos-absolute bg-cover bg-center bg-[url('/static/images/home/header-bg.png')]"></view>
    <view class="my-5 w-full flex items-center px-30rpx">
      <wd-img width="230rpx" mode="widthFix" src="/static/images/home/logo.jpg" />
      <wd-search
        placeholder="请输入商品名称搜索"
        placeholder-left
        cancel-txt="搜索"
        custom-class="header-search"
        placeholderClass="!text-20rpx"
      />
      <wd-icon name="/static/images/home/service.png" size="30rpx"></wd-icon>
    </view>

    <!-- 花花卡额度 -->
    <view
      class="pos-relative z-100 mx-30rpx py-15rpx px-34rpx box-border h-226rpx justify-between rounded-xl shadow bg-[linear-gradient(119.95deg,_#FEFBEC_0%,_#FFFBE8_30.96%,_#F7DDA5_100%)] mt--2"
    >
      <view>
        <view class="text-xs text-gray-500">
          <view class="flex items-center">
            <wd-img width="91rpx" height="37rpx" mode="widthFix" src="/static/images/home/card-logo.png" />
            <view class="text-22rpx h-22rpx ml-15rpx leading-37rpx text-[#947641]">商城最高分期额度（元）</view>
            <view
              class="pos-absolute right-0 top-0 text-22rpx ml-15rpx l text-[#574424] rounded-[0rpx_21.61rpx_0rpx_21.61rpx] bg-gradient-to-r from-[#BA8C5B] to-[#E0C5AA] w-145rpx h-28rpx text-center leading-[32rpx] !text-20rpx"
            >
              先享后付
            </view>
          </view>
        </view>
        <view class="pos-relative z-100 mt-10rpx flex items-center">
          <wd-img width="61rpx" mode="widthFix" src="/static/images/home/money-logo.png" />
          <view class="text-90rpx text-[#3C2913] font-bold ml-22rpx">50000</view>

          <view class="flex-1 flex justify-end">
            <view class="submit-btn mr-30rpx mt-80rpx">
              <button
                class="rounded-full text-white font-500 bg-[#3C2913] w-196rpx h-60rpx leading-60rpx text-center !text-28rpx"
              >
                立即申请
              </button>
            </view>
          </view>
        </view>
        <wd-img
          class="!pos-absolute right--50rpx z-10 top--50rpx"
          width="300rpx"
          mode="widthFix"
          src="/static/images/home/card-bg-icon.png"
        />
      </view>
    </view>

    <!-- 账单板块 -->
    <view class="bg-white mx-30rpx mt-30rpx px-30rpx py-30rpx rounded-lg">
      <view class="flex items-center justify-between">
        <view class="text-32rpx font-bold">我的账单</view>
        <view class="text-24rpx text-[#999]">查看更多 ></view>
      </view>
      <view class="grid grid-cols-4 mt-30rpx">
        <view v-for="(bill, index) in billList" :key="index" class="flex flex-col items-center">
          <wd-img width="60rpx" height="60rpx" :src="bill.icon"></wd-img>
          <view class="text-24rpx mt-10rpx">{{ bill.name }}</view>
          <view class="text-32rpx text-[#FF3C29] font-bold">{{ bill.value }}</view>
        </view>
      </view>
    </view>

    <!-- 中部广告 -->
    <view class="mx-30rpx mt-30rpx bg-white rounded-lg overflow-hidden">
      <view class="relative">
        <!-- 广告图片 -->
        <view class="flex">
          <view class="w-1/2 p-30rpx" @click="goToActivity(1)">
            <wd-img width="100%" mode="widthFix" class="rounded-lg" src="/static/images/shop/active-1.png"></wd-img>
            <view class="mt-10rpx text-center text-28rpx">人气爆款</view>
          </view>
          <view class="w-1/2 p-30rpx" @click="goToActivity(2)">
            <wd-img width="100%" mode="widthFix" class="rounded-lg" src="/static/images/shop/active-2.png"></wd-img>
            <view class="mt-10rpx text-center text-28rpx">黄金专场</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门产品推荐 -->
    <view class="mt-20rpx bg-white rounded-12rpx overflow-hidden mx-20rpx">
      <view class="p-20rpx">
        <shop-title title="热门产品推荐" />
      </view>
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="h-950rpx bg-white">
        <swiper-item v-for="(page, pageIndex) in hotProducts" :key="pageIndex">
          <view class="grid grid-cols-2 gap-20rpx p-20rpx">
            <view v-for="(product, index) in page" :key="index" class="flex flex-col rounded-13rpx overflow-hidden">
              <wd-img :src="product.img" class="mb-18rpx w-full h-340rpx rounded-8rpx" />
              <view class="flex justify-between px-10rpx">
                <view class="text-26rpx font-bold text-[#FF3C29]">￥{{ product.price }}</view>
                <view class="text-22rpx text-[#969696]">已售 {{ product.sold }}</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 商品推荐列表 -->
    <view class="mt-20rpx bg-white rounded-12rpx overflow-hidden mx-20rpx">
      <view class="p-20rpx">
        <shop-title title="商品推荐" />
      </view>
      <view class="grid grid-cols-2 gap-20rpx p-20rpx">
        <goods-item v-for="item in goodsList" :key="item.id" :goods="item" @click="handleGoodsClick(item)"></goods-item>
      </view>
    </view>

    <!-- 热门分类 -->
    <view class="mx-30rpx mt-30rpx p-30rpx bg-white rounded-lg">
      <view class="flex items-center justify-between mb-20rpx">
        <shop-title title="热门分类" />
        <view class="text-24rpx text-[#999]">全部 ></view>
      </view>
      <view class="grid grid-cols-5 gap-y-20rpx mt-30rpx">
        <view v-for="(menu, index) in menuList" :key="index" class="flex flex-col items-center">
          <wd-img width="60rpx" height="60rpx" :src="menu.icon"></wd-img>
          <view class="text-24rpx mt-10rpx">{{ menu.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// 在uni-app中，使用easycom自动导入组件
// 不需要手动导入，可以直接在模板中使用
// 组件放在components目录下会被自动识别

// 账单列表
const billList = ref([
  {
    name: '待完成',
    icon: '/static/images/home/icon-1.png',
    value: 1,
    key: '1'
  },
  {
    name: '审核中',
    icon: '/static/images/home/icon-2.png',
    value: 1,
    key: '2'
  },
  {
    name: '待提现',
    icon: '/static/images/home/icon-3.png',
    value: 1,
    key: '3'
  },
  {
    name: '待还款',
    icon: '/static/images/home/icon-4.png',
    value: 1,
    key: '4'
  }
])

// 热门产品轮播图数据
const hotProducts = ref([
  // 第一页
  [
    {
      id: 1,
      img: 'https://img.js.design/assets/img/685a6dd93aeeed03c0d7c3c7.png#1006f96908b5170b9c1335fa04cacb44',
      price: 4000,
      sold: 999
    },
    {
      id: 2,
      img: 'https://img.js.design/assets/img/685a6dd93aeeed03c0d7c3c7.png#1006f96908b5170b9c1335fa04cacb44',
      price: 3000,
      sold: 999
    },
    {
      id: 3,
      img: 'https://img.js.design/assets/img/685a6dd93aeeed03c0d7c3c7.png#1006f96908b5170b9c1335fa04cacb44',
      price: 2000,
      sold: 1000
    },
    {
      id: 4,
      img: 'https://img.js.design/assets/img/685a6dd93aeeed03c0d7c3c7.png#1006f96908b5170b9c1335fa04cacb44',
      price: 1000,
      sold: 2000
    }
  ],
  // 第二页
  [
    {
      id: 5,
      img: 'https://img.js.design/assets/img/685a6dd93aeeed03c0d7c3c7.png#1006f96908b5170b9c1335fa04cacb44',
      price: 1500,
      sold: 500
    },
    {
      id: 6,
      img: 'https://img.js.design/assets/img/685a6dd93aeeed03c0d7c3c7.png#1006f96908b5170b9c1335fa04cacb44',
      price: 2500,
      sold: 800
    },
    {
      id: 7,
      img: 'https://img.js.design/assets/img/685a6dd93aeeed03c0d7c3c7.png#1006f96908b5170b9c1335fa04cacb44',
      price: 3500,
      sold: 600
    },
    {
      id: 8,
      img: 'https://img.js.design/assets/img/685a6dd93aeeed03c0d7c3c7.png#1006f96908b5170b9c1335fa04cacb44',
      price: 4500,
      sold: 300
    }
  ]
])

// 菜单列表
const menuList = ref([
  {
    name: '手机',
    icon: '/static/images/home/sj.png'
  },
  {
    name: '电脑主机',
    icon: '/static/images/home/dn.png'
  },
  {
    name: '智能手表',
    icon: '/static/images/home/sb.png'
  },
  {
    name: '珠宝首饰',
    icon: '/static/images/home/ss.png'
  },
  {
    name: '美妆',
    icon: '/static/images/home/mz.png'
  },
  {
    name: '个人护理',
    icon: '/static/images/home/hl.png'
  },
  {
    name: '精品箱包',
    icon: '/static/images/home/xb.png'
  },
  {
    name: '钟表',
    icon: '/static/images/home/zb.png'
  },
  {
    name: '家用电器',
    icon: '/static/images/home/dq.png'
  },
  {
    name: '全部分类',
    icon: '/static/images/home/more.png'
  }
])

// 商品列表数据
const goodsList = ref([
  {
    id: 1,
    image: '/static/images/home/goods-1.png',
    title: '商品推荐1',
    price: '99.00',
    sold: '1000+'
  },
  {
    id: 2,
    image: '/static/images/home/goods-1.png',
    title: '商品推荐2',
    price: '199.00',
    sold: '880+'
  },
  {
    id: 3,
    image: '/static/images/home/goods-1.png',
    title: '商品推荐3',
    price: '299.00',
    sold: '760+'
  },
  {
    id: 4,
    image: '/static/images/home/goods-1.png',
    title: '商品推荐4',
    price: '399.00',
    sold: '650+'
  },
  {
    id: 5,
    image: '/static/images/home/goods-1.png',
    title: '商品推荐5',
    price: '499.00',
    sold: '540+'
  }
])

// 处理商品点击
const handleGoodsClick = (goods: any) => {
  uni.showToast({
    title: `点击了商品${goods.title}`,
    icon: 'none'
  })
}

// 跳转到活动页面
const goToActivity = (type: number) => {
  uni.navigateTo({
    url: `/pages/shop/activity?type=${type}`
  })
}
</script>
